<template>
  <div class="softArticlePromotion">
    <commonBanner
      bgUrl="https://oss-imag.aiseoword.com/aiseo-image/img-tab08-bannerIMG.webp"
      :listArr="['公司介绍', '商业合作', '共同发展']"
      buttonText="联系我们"
      backgroundPosition="center"
      :isContact="true"
    >
      <img
        class="softArticlePromotion-img"
        src="@/assets/image/mobile/aboutus/title.png"
        alt="关于我们"
      />
    </commonBanner>
    <!-- 关于我们 -->
    <div class="content-introduce">
      <img
        class="title-image"
        src="@/assets/image/contactUs/img／tab08／title／introduction@2x.png"
      />
      <div class="title-contente">
        AISEOWORD是成都柳暗星河科技有限公司旗下品牌，主要提供内容生产、SEO定制、新闻稿发布、网站联运等服务.
      </div>
      <div class="dificult-list-outer scrollbar-class">
        <div class="our-task-img mt-40">
          <img src="@/assets/image/mobile/aboutus/tab1.png" alt="" />
          <img src="@/assets/image/mobile/aboutus/tab2.png" alt="" />
          <img src="@/assets/image/mobile/aboutus/tab3.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 联系我们 -->
    <div class="more-simple">
      <img
        class="title-image"
        src="@/assets/image/contactUs/img／tab08／title／contactus@2x.png"
      />
      <div class="title-contente">
        我们的公司扎根于天府之国-成都，具备深厚的互联网实力，以及遍布全网全渠道的宣发资源。我们将以卓越的服务和创新思维，为您提供全方位的互联网解决方案，助力您的企业及产品在竞争激烈的市场中脱颖而出。
      </div>
      <img
        ref="aboutUsRef"
        class="title-map"
        src="https://oss-imag.aiseoword.com/aiseo-image/img-homepage-bannerIsg.png"
        alt=""
      />
      <div class="content-img-box">
        <img
          @click="copyText(item.toastText, item.copyText)"
          v-for="(item, index) in joinUsArr"
          :key="index"
          :src="item.src"
          alt=""
        />
      </div>
    </div>

    <endButton></endButton>
    <div class="loading-box" v-show="loadingPage">...加载中</div>
  </div>
</template>

<script setup>
import commonBanner from "@/components/mobileComponent/commonBanner.vue";
import { ref, reactive, onMounted, onUnmounted, onBeforeUnmount } from "vue";
import EventBus from "@/utils/eventBus.js";
import titleImg1 from "@/assets/image/mobile/softArticlePromotion/banner-title1.png";
import titleImg2 from "@/assets/image/mobile/softArticlePromotion/banner-title2.png";
import titleImg3 from "@/assets/image/mobile/softArticlePromotion/banner-title3.png";
import titleImg4 from "@/assets/image/mobile/softArticlePromotion/banner-title4.png";
import titleImg5 from "@/assets/image/mobile/softArticlePromotion/banner-title5.png";

import img1 from "@/assets/image/mobile/softArticlePromotion/banner1.png";
import img2 from "@/assets/image/mobile/softArticlePromotion/banner2.png";
import img3 from "@/assets/image/mobile/softArticlePromotion/banner3.png";
import img4 from "@/assets/image/mobile/softArticlePromotion/banner4.png";
import img5 from "@/assets/image/mobile/softArticlePromotion/banner5.png";
import endButton from "./endButton.vue";

import item1 from "@/assets/image/contactUs/item1.png";
import item2 from "@/assets/image/contactUs/item2.png";
import item3 from "@/assets/image/contactUs/item3.png";

const carouselList = ref([
  {
    img: img1,
    titleImg: titleImg1,
    title: "软文发布快速",
    disc: "合作媒体在线收稿，通过微信公众号实时提醒，确保稿件极速投放",
  },
  {
    img: img2,
    titleImg: titleImg2,
    title: "效果实时保障",
    disc: "软文依据发布大数据，推荐媒体综合收录率90%以上",
  },
  {
    img: img3,
    titleImg: titleImg3,
    title: "专业高效服务",
    disc: "100+传播顾问服务超30W+企业，不同行业投放策略",
  },
  {
    img: img4,
    titleImg: titleImg4,
    title: "实时监测",
    disc: "实时监测让您清晰了解SEO优化排名效果及费用支出情况，用户可随时查看关键词排名的实时数据，方便快捷。",
  },
  {
    img: img5,
    titleImg: titleImg5,
    title: "效果覆盖广阔",
    disc: "采用新闻传播模式进行推广可以产生频繁的新闻曝光率。另外，大量地域媒体，可以根据您的地域需求，发布辐射到各行业的精准媒体上！",
  },
]);

const joinUsArr = [
  {
    title: "成都总部",
    titleEn: "Sichuan, Chengdu",
    disc: "AISEO - 打造世界一流的网推平台",
    copyText: "65221233",
    toastText: "已复制电话号码到剪贴板！",
    src: item1,
  },
  {
    title: "加入我们",
    titleEn: "Join our team!",
    disc: "招聘 - laxhzhaopin@gmail.com",
    copyText: "laxhzhaopin@gmail.com",
    toastText: "已复制招聘邮箱地址到剪贴板！",
    src: item2,
  },
  {
    title: "商务合作",
    titleEn: "Business Affair",
    disc: "商务 - liuanxinghe@gmail.com",
    copyText: "liuanxinghe@gmail.com",
    toastText: "已复制商务合作邮箱地址到剪贴板！",
    src: item3,
  },
];
const aboutUsRef = ref();
const copyText = (toastText, text) => {
  EventBus.emit("openToastBox", [toastText, text]);
};
onMounted(() => {
  EventBus.on("aboutUsScrollTo", () => {
    const element = document.getElementById("app");
    element.scrollTo({
      top: aboutUsRef.value.offsetTop,
      behavior: "smooth",
    });
  });
});
onUnmounted(() => {
  EventBus.off("aboutUsScrollTo");
});
</script>

<style lang="scss" scoped>
.softArticlePromotion {
  width: 100%;
  background: #f5f5f5;
  .loading-box {
    text-align: center;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: bold;
    font-size: 10px;
    color: #808080;
    line-height: 24px;
    letter-spacing: 1px;
  }
  .title-contente {
    margin-top: 16px;
    font-family: Microsoft YaHei UI, Microsoft YaHei UI;
    font-weight: 400;
    font-size: 14px;
    color: #808080;
    line-height: 20px;
    padding: 0 40px;
    box-sizing: border-box;
    text-align: center;
  }
  .dificult-list-outer {
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    overflow: overlay;
    .our-task-img {
      display: flex;
      img {
        width: 249px;
        height: 334px;
        & + img {
          margin-left: 12px;
        }
      }
    }
  }
  .softArticlePromotion-img {
    height: 88px;
  }
  .content-introduce {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 80px;
    .title-image {
      height: 50px;
    }
  }

  .more-simple {
    margin: 30px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title-image {
      height: 50px;
    }
    .title-map {
      width: 100%;
      object-fit: cover;
      margin-top: 24px;
    }
    .content-img-box {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      margin-top: 24px;
      justify-content: center;
      img {
        width: 327px;
        background: #fafafa;
        border-radius: 16px;
      }
    }
    @media only screen and (min-width: 740px) {
      .content-img-box {
        justify-content: start;
        padding: 0 24px;
        box-sizing: border-box;
      }
    }
  }
}
</style>
